<template>
  <div class="editor-box">
     <Toolbar
        class="editor-tool"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        mode="default"
      />
      <Editor
        class="editor-input"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        mode="default"
        @onCreated="handleCreated"
      />
  </div>
</template>

<script>
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  import { shallowRef } from 'vue'
  import '@wangeditor/editor/dist/css/style.css' // 引入 css
  export default {
    props: {
      modelValue: {
        type: String,
        default: () => ''
      }
    },
    components: {
      Editor,
      Toolbar
    },
    data() {
      const editorRef = shallowRef()
      function handleCreated(editor) {
        editorRef.value = editor
      }
      return {
        toolbarConfig: {},
        editorConfig: {},
        editorRef,
        handleCreated
      }
    },
    computed: {
      valueHtml: {
        get() {
          return this.modelValue;
        },
        set(val) {
          this.$emit('update:modelValue', val)
        }
      }
    },
    beforeUnmount() {
      const editor = this.editorRef.value
      if (editor == null) return
      editor.destroy()
    },
    methods: {
      
    }
  }
</script>

<style lang="scss" scoped>
.editor-box{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .editor-tool{
    border-bottom: 1px solid #ccc
  }
  .editor-input{
    flex: 1;
  }
}
</style>